<template>

  <div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/1.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/2.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/3.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >飙升榜</div>
    </div>


    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/4.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/5.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/7.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >新书榜</div>
    </div>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/8.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/9.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/10.png')"/>
      </van-grid-item>
    </van-grid><div>
    <div class="text-center px-4" >潜力榜</div>
  </div>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/11.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/12.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/13.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >小说榜</div>
    </div>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/14.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/15.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/17.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >神作榜</div>
    </div>


    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/18.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/19.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/20.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >热听榜</div>
    </div>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/21.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/22.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/23.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >畅销榜</div>
    </div>

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/24.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/25.png')"/>
      </van-grid-item>
      <van-grid-item>
        <van-image
            :src="require('@/assets/bangdan/26.png')"/>
      </van-grid-item>
    </van-grid>
    <div>
      <div class="text-center px-4" >总榜</div>
    </div>


</div>
</template>

<script>
export default {
  name: "BangdanApp"
}
</script>

<style scoped>

</style>
